<template>
    <el-icon style="margin-right: 10px;" @click="settingStore.updateFold">
        <component :is="settingStore.getFold() ? 'Expand' : 'Fold'" />
    </el-icon>
    <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" :to="{ path: item.path }"
            v-show="item.meta.title">
            <el-icon width="12px" height="12px">
                <component :is="item.meta.icon" v-if="item.meta.title"/>
            </el-icon>
            <span style="margin-left: 5px;">{{ item.meta.title }}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup lang='ts' name="TabbarBreadcrumb">
import useSettingStore from '@/store/modules/setting';
const settingStore = useSettingStore();

</script>

<style scoped></style>